import { Form, Modal, Avatar, Toast } from "@douyinfe/semi-ui";
import { IconPlus, IconCamera } from "@douyinfe/semi-icons";
import { useEffect, useState, useRef } from "react";
import anchor from "../../api/anchor";
import common from "../../api/common";
import { avatarUrl } from "../../lib/utils";


export default function AnchorEditPage({ visible, setVisible, data, setRefreshTable }) {
    const api = useRef();
    const [roles, setRoles] = useState([]);
    common.roleList({ return_type: 'select' }).then(({ data }) => setRoles(data))

    const [avatar, setAvatar] = useState(avatarUrl(data.avatar));
    useEffect(() => {
        setAvatar(avatarUrl(data?.avatar || ''));
        api.current?.setValues(data, true);
    }, [data]);


    const handleOk = () => {
        api.current.validate().then((values) => {
                anchor.save(values).then(({ data, msg }) => {
                    Toast.success(msg)
                    setRefreshTable()
                    setVisible(false);
                })
            }).catch((errors) => { console.log(errors); });
    };
    const handleCancel = () => {
        setVisible(false);
    };

    const style = {
        backgroundColor: 'var(--semi-color-overlay-bg)',
        height: '100%',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'var(--semi-color-white)',
    };

    const hoverMask = (<div style={style}><IconCamera /></div>);

    return <>
        <Modal
            title={data === null ? '创建成员' : '修改成员'}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            closeOnEsc={true}
        >
            <Form
                labelPosition={'left'}
                initValues={data}
                getFormApi={formApi => api.current = formApi}
                render={({ formState, formApi, values }) => (
                    <>
                        <Form.Upload
                            field='avatars'
                            noLabel={true}
                            action={anchor.getUploadUrl()}
                            accept={'image/*'}
                            name="file"
                            data={{ type: 'anchor/avatar' }}
                            showUploadList={false}
                            onSuccess={({ data }) => {
                                formApi.setValue('avatar', data.path);
                                setAvatar(data.url);
                                Toast.success('上传成功')
                            }}
                            headers={{ "Authorization": `Bearer ${JSON.parse(localStorage.getItem('token')).token}` }}
                            onError={() => Toast.error('上传失败')}
                            style={{ display: 'block', textAlign: 'center' }}
                        >
                            <Avatar
                                src={avatar}
                                style={{ margin: 4, width: 100, height: 100, border: 'var(--semi-border-radius-circle)' }}
                                hoverMask={hoverMask}>
                                <IconPlus size="large" />
                            </Avatar>

                        </Form.Upload>

                        <Form.Select optionList={roles}
                            field="role_id"
                            label='身份'
                            rules={[
                                { required: true, message: '请选择角色' },
                            ]}
                            style={{ width: '100%' }} />
                        <Form.Input
                            field='anchor_name'
                            label='姓名'
                            rules={[
                                { required: true, message: '请填写姓名' },
                            ]}
                        />
                    </>
                )}>
            </Form>

        </Modal>
    </>
}